// todo============= 顶部Tab栏============================
async function top_render() {
    const res = await axios.get('/index/index')
    // console.log(res);
    const newData = res.data.data.allCate
    // console.log(newData);
    document.querySelector('.container ul').innerHTML = newData.map((item) => {
        return `  
        <li class="menu-item menu-item-type-taxonomy menu-item-object-category " >
            <a title="" href="show.html" data-id="${item.id}"><span class="fa ${item.icon}"></span>${item.catename}</a>
        </li>
        `
    }).join('')
}
top_render()


//todo ================== 轮播图 =========================
async function render() {
    const res = await axios.get('/index/index')
    // console.log(res);
    // console.log(res.data.data);
    const newDataone = res.data.data.banner
    //* 获取数据
    document.querySelector('.swiper-wrapper').innerHTML = newDataone.map(item => {
        //* 渲染
        return `
        <div class="swiper-slide">
           <img src="http://124.223.14.236:8060/${item.advimgsrc}">
        </div>`
    }).join('')
}
render()


// todo =============== 热门推荐 渲染 =====================
async function middle_Render() {
    const res = await axios.get('/index/hot')
    // console.log(res);
    // console.log(res.data.data.list);
    const newDatatwo = res.data.data.list
    document.querySelector('.sticky ul').innerHTML = newDatatwo.map((item) => {
        return ` 
            <li class="item"><a target="_blank" href=""><img src="http://124.223.14.236:8060/${item.pic}"
            class="thumb" />${item.title}</a></li>
           `
    }).join('')
}
middle_Render()


// todo =============== 侧边图片 渲染 =====================
async function right_Render() {
    const res = await axios.get('/index/index')
    // console.log(res.data.data);
    const newDatatwo = res.data.data.sideBanner
    document.querySelector('.textwidget').innerHTML = newDatatwo.map((item) => {
        return ` 
         <a href="${item.advimglink}" rel="nofollow" target="_blank" title="${item.advimgdesc}">
            <img class="g430" style="width:360px;height:133px;" src="http://124.223.14.236:8060/${item.advimgsrc}" alt="阿里云开学季">
         </a>
       `
    }).join('')
}
right_Render()


//todo ================ 最新更新开始 渲染 ==================
async function hot_Render() {
    const res = await axios.get('/index/new')
    // console.log(res.data.data.list.data);
    const newData = res.data.data.list.data
    console.log(newData[0].id);
    document.querySelector('#article-box').innerHTML = newData.map((item) => {
        return ` 
        <article class="excerpt excerpt-one" id="article-box">
          <header>
            <a class="cat label label-important" href="">热门<i class="label-arrow"></i></a>
            <h2>
              <a target="_blank" href="show.html" data-id='${item.id}' class="show">${item.title}</a>
            </h2>
          </header>
          <p class="text-muted time">
            <a href="" data-id='${item.id}' class="show">${item.author}</a> 发布于 2018-03-30
          </p>
          <p class="focus">
            <a target="_blank" href="http://blog.weknow.cn/474.shtml" class="thumbnail">
              <span class="item"><span class="thumb-span"><img src="http://124.223.14.236:8060/${item.pic}" class="thumb" /></span></span></a>
          </p>
          <p class="note">${item.description}</p>
          <p class="text-muted views">
                <span class="post-views">阅读${item.click}</span>
                <span class="post-comments">评论(0)</span>
                <a href="javascript:;" class="post-like">
                    <i class="fa fa-thumbs-up"></i>赞 (<span>${item.lovenum}</span>)
                </a>
          </p>
          </article>
        `
    }).join('')
}
hot_Render()


//todo ================ 热门文章开始 渲染 ==================
async function article_render() {
    const res = await axios.get('/index/new')
    // console.log(res.data.data.list.data);
    const newData = res.data.data.list.data
    console.log(newData);
    document.querySelector('.widget ul').innerHTML = newData.map((item) => {
        return ` 
        <li>
            <a target="_blank" href="">
            <span class="thumbnail">
                <img src="http://124.223.14.236:8060/${item.pic}" class="thumb" />
            </span>
            <span class="text">${item.title}</span>
            <span class="text-muted post-views">阅读${item.click}</span>
            </a>
        </li>
        `
    }).join('')
}
article_render()


//todo ================ 热门标签开始 渲染 ==================
async function render_Hot() {
    const res = await axios.get('/index/index')
    // console.log(res);
    // console.log(res.data.data.allTag);
    const newData = res.data.data.allTag
    // console.log(newData);
    document.querySelector('.widget_tags ul').innerHTML = newData.map((item) => {
        return ` 
             <li><a title="" href="">${item.tagname}</a></li>
            `
    }).join('')
}
render_Hot()


//todo ================ 友情链接开始 渲染 ==================
async function hot_right_render() {
    const res = await axios.get('/index/index')
    // console.log(res);
    // console.log(res.data.data.allLink);
    const newData = res.data.data.allLink
    // console.log(newData);
    document.querySelector('.widget_comments ul').innerHTML = newData.map((item) => {
        return ` 
            <li>
                <a href="${item.url}"><img src="http://124.223.14.236:8060/${item.img}" alt="">
                    <p>${item.des}</p>
                </a>
            </li >
        `
    }).join('')
}
hot_right_render()


// //todo ================ 最近推荐开始 渲染 ===============
// async function recommend_render() {
//     const res = await axios.get('/index/recommend')
//         // console.log(res);
//         // console.log(res.data.data.list);
//         const newData = res.data.data.list
//         console.log(newData);
//         document.querySelector('.widget_postlist ul').innerHTML = newData.map((item) => {
//             return `
//              <li>
//                 <a target="_blank" href="">
//                     <span class="thumbnail">
//                     <img class="thumb" src="http://124.223.14.236:8060/${item.pic}">
//                     </span>
//                     <span class="text">${item.title}</span>
//                     <span class="text-muted post-views">阅读${item.lovename}</span>
//                 </a>
//             </li>
//          `
//     }).join('')
// }
// recommend_render() 


// //todo ================ 底部 友情链接  =======================
async function bottom_render() {
    const res = await axios.get('/index/index')
    // console.log(res);
    // console.log(res.data.data.allLink);
    const newData = res.data.data.allLink
    // console.log(newData);
    document.querySelector('.footer .link').innerHTML = newData.map((item) => {
        return ` 
        <a href="" title="obj.des">${item.des}</a> <span>|</span>
        `
    }).join('')
}
bottom_render()


// //todo ================ 底部 版权 =======================
async function copyright_render() {
    const res = await axios.get('/index/index')
    // console.log(res);
    const newData = res.data.data.config.allData
    // console.log(newData);
    newData.forEach((item) => {
        if (item.id === 55) {
            document.querySelector('.footer p').innerHTML = ` <p>&copy; 2021 <a href="http://blog.weknow.cn">优点达资讯,</a>
            &nbsp;&nbsp;联系邮箱：${item.attr_value}
            &nbsp;&nbsp; <a href="">备案号信息</a>
            </p>`
            // document.querySelector('.footer p').innerHTML = newData.map((item) => {
            //     return `
            // <p>&copy; 2021 <a href="http://blog.weknow.cn">优点达资讯,</a>
            // &nbsp;&nbsp;联系邮箱：${item.attr_value}
            // &nbsp;&nbsp; <a href="">备案号信息</a>
            // </p>
            //     `
            // }).join('')
        }
    });
}
copyright_render()

document.querySelector('.nav').addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        const id = e.target.dataset.id
        console.log(id);
        localStorage.setItem('showId', JSON.stringify(id))
    }
})


// todo ============== 分页渲染热门推荐 ================
const query = {
    page: 1,    //	是	int	页码值
    limit: 10,   //	是	int	每页显示多少条数据
}

indexRender()
function indexRender() {
    axios.get(`/index/new`, {
        params: query
    }).then(({ data: { data } }) => {
        // console.log(data);
        // 最近更新条数
        document.querySelector('#h3').innerHTML = `<small class="pull-right">24小时更新：${data.num_day}篇 &nbsp; &nbsp; 一周更新：${data.num_week}篇</small><strong>最近更新</strong>`
        document.querySelector('.recent').innerHTML = data.list.data.map(item => {
            // 转时间
            const time = new Date(parseInt(item.create_date)).toLocaleDateString().replace(/\//g, "-").replace(/日/g, " ");
            return `
                <article class="excerpt excerpt-one">
                  <header>
                    <a class="cat label label-important" href="">${item.ishot === 1 ? '热门' : '推荐'}<i class="label-arrow"></i></a>
                    <h2>
                      <a href="javascript:;" id="go" title="${item.title}" data-id=${item.id}>${item.title}</a>
                    </h2>
                  </header>
                  <p class="text-muted time">
                    <a href="">${item.author}</a> 发布于 ${time}
                  </p>
                  <p class="focus">
                    <a target="_blank" href="http://blog.weknow.cn/474.shtml" class="thumbnail">
                      <span class="item"><span class="thumb-span">
                      <img src="http://124.223.14.236:8060/${item.pic}" class="thumb" /></span></span></a>
                  </p>
                  <p class="note">${item.description}</p>
                  <p class="text-muted views">
                    <span class="post-views">阅读(${item.click})</span>
                    <span class="post-comments">评论(0)</span>
                    <a href="javascript:;" class="post-like">
                      <i class="fa fa-thumbs-up"></i>赞 (<span>${item.lovenum}</span>)
                    </a>
                    <span class="post-tags">${item.tags == null ? '' : `标签：<a href="" rel="tag">${item.tags}</a>`}
                  </p>
                </article>
          `
        }).join('')
        renderPage(data.list.count)
    })
}


// 分页
const laypage = layui.laypage
function renderPage(total) {
    laypage.render({
        elem: 'page-box',//注意，这里的 test1 是 ID，不用加 # 号
        count: total, //数据总数，从服务端得到
        curr: query.page,// 当前第几页
        limit: query.limit,   // 每页显示的数据
        limits: [1, 2, 3, 4, 5, 6, 7, 8, 9, , 10],
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],  // 排版
        jump: function (obj, first) {
            // 完成切换分页效果：发送请求
            // ! 记得修改 query 对象的 pagenum、pagesize 的值
            query.page = obj.curr
            query.limit = obj.limit


            //首次不执行
            if (!first) {
                //do something
                // if 成立，说明 first 值为 nderfofer,是点击分页效果
                console.log(query);
                indexRender()
            }
        }
    });
}




// todo ===================== 顶部 登入注册功能 ==============================
document.querySelector('#article-box').addEventListener('click', function (e) {
    e.preventDefault()
    if (e.target.className === 'show') {
        console.log(11)
        const id = e.target.dataset.id
        console.log(id)
        localStorage.setItem('textid',JSON.stringify(id))
        location.href='/web-static/show.html'
    }
})
async function getuser() {
    const { data: { data } } = await axios.get('user/getUserInfo', {
        headers: { token: localStorage.getItem('token') }
    })
    console.log(data);
    // 账号信息
    document.querySelector('.slinks').innerHTML = `
     <i class="iconfont icon-yonghu"></i>你好${data.userInfo.username} 
    <i class="iconfont icon-exit-full"></i>
    `
}
getuser()


